<template>
  <div class="home">
    <div class="banner">
      <div class="banner-title">
        <h1>一站式服务<br />全球电子商务</h1>
        <p>ERP系统, 货物采购,仓储管理,跨境运输,销售运营,全方位支持管理</p>
        <router-link to="/about" tag="span"><div>联系我们</div></router-link>
      </div>
      <div class="banner-img"></div>
    </div>
    <div class="item">
      <div class="item-title">亚马逊运营一站式服务支持</div>
      <div class="item-content">
        <div class="content-title">🎯 多种模式支持，实力经验保障 🎯</div>
        <p>无论是精品模式还是精铺模式，我们都有着丰富的运营经验，为你提供专业支持</p>

        <div class="content-title">📈 库存管理分析算法，助你优化毛利 📈</div>
        <p>我们沉淀多年的库存管理分析算法，有效避免滞销库存，保障你的毛利最大化！</p>

        <div class="content-title">📦 200+物流渠道对接，最优物流选择 📦</div>
        <p>与200多家物流渠道对接，为你提供最佳物流方案，让你的产品更快、更便捷地到达目的地！</p>

        <div class="content-title">🛒 全面支持Amazon运营，智能化管理 🛒</div>
        <p>支持FBM、FBA发货，智能备货，每个环节都为你量身定制，助你在Amazon平台蓬勃发展！</p>

        <div class="content-title">📣 常年广告优化策略，Acos保持健康 📣</div>
        <p>我们拥有长期的广告优化策略，帮助你保持Acos在健康的范围内，让你的广告投入更具成效！</p>

        <p>选择我们，让你的业务更高效、更顺畅！</p>
      </div>
    </div>
    <div class="image1"></div>
    <div class="item">
      <div class="item-title">仓库运作</div>
      <div class="item-content">
        <div class="content-title">🏢 仓库支持，省心省力 🏢</div>
        <p>我们的仓库支持让你无需操心仓库事务，专注于提升产品业绩，让你的精力得以最大化发挥！</p>

        <div class="content-title">💼 专业团队支持，效率保障 💼</div>
        <p>我们拥有专业团队，为你提供高效的支持与服务，确保你的业务运营顺利无阻！</p>

      </div>
    </div>
    <div class="foot">
      <div class="left-img"></div>
      <div class="right-text">
        <div class="right-item">
          <div class="first">测样</div>
          <div class="radius">签收</div>
          <div class="radius">测样</div>
          <div class="radius">测样报告</div>
        </div>
        <div class="right-item">
          <div class="first">FBA</div>
          <div class="radius">签收</div>
          <div class="radius">质检</div>
          <div class="radius">头程装箱</div>
          <div class="radius">发货</div>
        </div>
        <div class="right-item">
          <div class="first">FBM</div>
          <div class="radius">签收</div>
          <div class="radius">质检</div>
          <div class="radius">订单打印</div>
          <div class="radius">发货</div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped lang="scss">
.home {
  min-height: calc(100% - 150px);
  border: 0 solid transparent;
  background-color: white;
}

.banner {
  width: 100%;
  height: 442px;
  background-color: #2F84B9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-title {
  width: 346px;
  color: #FFFFFF;
  margin-left: 140px;

  h1 {
    font-size: 48px;
    line-height: 69px;
  }

  p {
    font-size: 16px;
    line-height: 23px;
    margin: 20px 0;
  }

  div {
    width: 193px;
    height: 64px;
    background-color: #CBA528;
    border: 2px solid #FFFFFF;
    border-radius: 7px;
    text-align: center;
    font-size: 24px;
    line-height: 64px;
    cursor: pointer;
    user-select: none;
  }
}

.banner-img {
  width: 766px;
  height: 326px;
  background: url("../assets/images/home_banner.png") no-repeat center;
}

/* 内容 */
.item {
  width: 872px;
  color: #2F84B9;
  margin: 0 auto 50px;

  .item-title {
    font-size: 42px;
    line-height: 60px;
    font-family: 'MyFont2', sans-serif;
    text-align: center;
    margin: 70px 0;
  }
}

.item-content {
  .content-title {
    font-weight: 700;
    font-size: 22px;
  }

  p {
    font-size: 16px;
    margin-bottom: 30px;
  }
}

.image1 {
  width: 912px;
  height: 506px;
  margin: auto;
  background: url("../assets/images/bacads-diagram.png") no-repeat center;
}

.left-img {
  width: 419px;
  height: 314px;
  background: url("../assets/images/image.png");
  box-shadow: 9px 7px 3px 4px rgba(0, 0, 0, 0.5);
  margin-left: 50px;
}

.foot {
  display: flex;
  width: 1250px;
  margin: 150px auto;
}

.right-text {
  margin-left: 70px;
  color: #0761BA;
  min-width: 650px;
}

.right-item {
  display: flex;
  margin: 30px 0;

  .first {
    font-size: 42px;
    line-height: 60px;
    font-family: 'MyFont2', sans-serif;
    width: 100px;
  }

  .radius {
    text-align: center;
    border-radius: 24px;
    padding: 17px 13px;
    background-color: #D8D8D8;
    min-width: 110px;
    font-size: 18px;
    font-family: 'MyFont2', sans-serif;
  }

  div {
    margin-right: 30px;
  }
}
</style>